<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
        <title>Bar_Chart(3D)</title> 
        <link rel="stylesheet" type="text/css" href="demo.css">
        <link rel="stylesheet" type="text/css" href="graph.css">
    </head>
    <body>
    
        <div class="container">

            <section class="main">
				
                <input type="radio" name="resize-graph" id="graph-large" checked="checked"><label for="graph-large">Large</label>   

                <input type="radio" name="paint-graph" id="graph-green" checked="checked"><label for="graph-green">Green</label>

                <input type="radio" name="fill-graph" id="f-product1" checked="checked"><label for="f-product1">Product 1</label>

                <ul class="graph-container">
                    <li>
                        <span>2016</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">25</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>2017</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">50</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>2018</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">75</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>2019</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">100</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>2020</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">50</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <ul class="graph-marker-container">
                            <li style="bottom:25%;"><span>25%</span></li>
                            <li style="bottom:50%;"><span>50%</span></li>
                            <li style="bottom:75%;"><span>75%</span></li>
                            <li style="bottom:100%;"><span>100%</span></li>
                        </ul>
                    </li>
                </ul>

            </section>

        </div>

    
